<!DOCTYPE html>
<HTML lang="zh-cn">
  <HEAD>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 优先用webkit内核渲染，应对国产双核浏览器 -->
    <meta name="renderer" content="webkit">
    <!-- 定义搜索引擎关键字 -->
    <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" /> 
    <!-- 定义页面描述 -->
    <meta name="description" content="免费的 web 技术教程。" />
    <!-- bootstrap是移动设备优先，为确保适当的绘制和触屏缩放，应增加viewport元数据标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
      .item {
        padding-left: 20px;
        padding-right : 20px;
        padding-top : 25px;
        padding-bottom : 35px;
      }
      .item-title {
          font-size : 20px;
          font-family: "Microsoft YaHei","WenQuanYi Micro Hei",SimHei,tahoma,sans-serif;
          color : #333;
          line-height:1.5em;
          word-break: break-word;
          word-wrap: break-word;
      }
      .item-info {
        font-size : 14px;
        font-family: "Microsoft YaHei","WenQuanYi Micro Hei",SimHei,tahoma,sans-serif;
        margin-bottom: 4px;
        line-height: 20px;
        overflow: hidden;
        color: #b8b8b8;
      }
      .item-comment {
        float:right;
        cursor:pointer;
      }
      .item-content {
        font-family: "Microsoft YaHei","WenQuanYi Micro Hei",SimHei,tahoma,sans-serif;
        line-height: 22px;
        font-size : 14px;
        letter-spacing: .06em;
        word-break: break-word;
        word-wrap: break-word;
      }
    </style>
  </HEAD>
  <body>
    <!-- 
    用nav标签创建一个导航条 
    <nav> 标签定义导航链接的部分。
    <nav> 标签是 HTML 5 中的新标签。
    如果文档中有“前后”按钮，则应该把它放到 <nav> 元素中。 
    导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了为站点名称和基本的导航定义样式。
    添加 role="navigation"，有助于增加可访问性。
    为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。
    通过 .navbar-fixed-top 使菜单固定到顶部
    -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container-fluid">

        <div class="navbar-header">
          <!-- 在窗口很窄的时候，会出现三个横道的导航菜单按钮，以便手机等设备使用 -->
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <!-- 通过增加标签使屏幕阅读器可以正确识别。对于这些内联表单，设置 .sr-only 类将其隐藏。 -->
          <span class="sr-only">Toggle navigation</span>
          <!-- 小屏时导航菜单按钮上的横道图标 -->
          <span class="icon-bar"></span>
          <!-- 小屏时导航菜单按钮上的横道图标 -->
          <span class="icon-bar"></span>
          <!-- 小屏时导航菜单按钮上的横道图标 -->
          <span class="icon-bar"></span>
          </button>
          <!-- 导航栏中的网站名称，通过navbar-brand可以使字看起来大一点 -->
          <a class="navbar-brand" href="#">网站名称</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-left">
            <li><a href="#home"><span class="glyphicon glyphicon-home"></span> 首页</a></li>
            <li><a href="#about">科學人</a></li>
            <li><a href="#contact">小組</a></li>
            <li><a href="#contact">問答</a></li>
            <li><a href="#contact">MOOC學院</a></li>
            <li><a href="#contact">知性</a></li>
            <!--↓ 帶下拉的導航菜單 ↓-->
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">更多 <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">日誌</a></li>
                <li><a href="#">活動</a></li>
                <li><a href="#">研究生</a></li>
                <!-- 二級菜單的分割線 -->
                <li class="divider"></li>
                <li class="dropdown-header">果殼精選</li>
                <li><a href="#">流言百科</a></li>
                <li><a href="#">任意門</a></li>
              </ul>
            </li>                
            <!--↑ 帶下拉的導航菜單 ↑-->
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <!-- 搜索框 -->
            <li style = "width:430px" class="visible-desktop">
              <form class="navbar-form" role="search">
                <div class="form-group">
                  <div class="input-group">
                    <input type="text" class="form-control" placeholder="請輸入所要查找的關鍵字，多個關鍵字以空格分割">
                    <div class="input-group-addon"><span class="glyphicon glyphicon-search"></span></div>
                  </div>
                </div>
              </form>
            </li>
            <li><a href="#">登錄</a></li>
            <li><a href="#">註冊</a></li>
          </ul>
        </div><!--/.nav-collapse -->          
      </div>
    </nav>
    <!-- 主體部分增加padding-top=60px ，否則會被導航條蓋住一部分 -->
    <div class="container" style="padding-top:60px">

      <!-- Main component for a primary marketing message or call to action -->
      <!--  標題部分 
      <div class="jumbotron">
      <h1>Navbar example</h1>
      </div>
      -->
      <div class="row">
        <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
          <div class="thumbnail item">
            <span class="label label-success">速读</span>&nbsp;<span class="label label-default">医学</span>
            <h3><a class="item-title" href="" target="_blank">为什么非转基因谷物早餐里没有了维生素？</a></h3>
            <div class="item-info">
              <span style="padding-right:6px">Dan Charles</span> 
              <span style="padding-left:6px">今天09:30</span>
              <a class="item-info item-comment">
                <span class="glyphicon glyphicon-comment"></span>&nbsp;7
              </a>
            </div>
            <img data-src="holder.js/300x240" alt="..." src="img/aaa.jpg">
            <div class="caption">
              <p class="item-content">大概一年前，两种美国常见的早餐谷物宣布成为不含转基因成分的食品，这一举措让维生素不得不从产品配料表中消失。由于要找到完全符合“非转基因”要求的维生素相当困难，食品制造商可能更情愿在产品中牺牲掉这些营养素。</p>
            </div>
          </div>
        
          <div class="thumbnail item">
            <span class="label label-success">前沿</span>&nbsp;<span class="label label-default">心理</span>
            <h3><a class="item-title" href="" target="_blank">怎样消除同性偏见？和当事人谈谈</a></h3>
            <div class="item-info">
              <span style="padding-right:6px">毛球控</span> 
              <span style="padding-left:6px">昨天17:03</span>
              <a class="item-info item-comment">
                <span class="glyphicon glyphicon-comment"></span>&nbsp;12
              </a>
            </div>
            <img data-src="holder.js/300x240" alt="..." src="img/aaa.jpg">
            <div class="caption">
              <p class="item-content">研究发现，与同性恋者面对面的交流20分钟有关婚姻的问题，就可以显著提高个人对同性婚姻的支持度。这种态度的转变持续时间可长达1年，还可以影响到参与者的亲友。研究结果证明人与人之间的直接接触，可以明显地消除敌意和偏见。</p>
            </div>
          </div>
        </div>
        <!-- 響應式佈局所需要的佔位符，只在sm和xs時起作用 -->
        <div class="clearfix visible-sm visible-xs"></div>
        <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
          <div class="thumbnail item">
            <span class="label label-success">前沿</span>&nbsp;<span class="label label-default">医学</span>
            <h3><a class="item-title" href="" target="_blank">痛苦记忆缘何而来？</a></h3>
            <div class="item-info">
              <span style="padding-right:6px">健康朝九晚五</span> 
              <span style="padding-left:6px">昨天18:08</span>
              <a class="item-info item-comment">
                <span class="glyphicon glyphicon-comment"></span>&nbsp;4
              </a>
            </div>
            <img data-src="holder.js/300x240" alt="..." src="img/aaa.jpg">
            <div class="caption">
              <p class="item-content">最新研究发现恐怖记忆的形成并不像我们之前认为的那样，只与大脑杏仁核、听觉和刺激有关。在这个过程中，去甲肾上腺素的作用不可忽视。</p>
            </div>
          </div>          
        
          <div class="thumbnail item">
            <span class="label label-success">前沿</span>&nbsp;<span class="label label-default">传播</span>
            <h3><a class="item-title" href="" target="_blank">媒体不实报道，根源在高校新闻中心</a></h3>
            <div class="item-info">
              <span style="padding-right:6px">Steve Connor</span> 
              <span style="padding-left:6px">昨天10:50</span>
              <a class="item-info item-comment">
                <span class="glyphicon glyphicon-comment"></span>&nbsp;33
              </a>
            </div>
            <img data-src="holder.js/300x240" alt="..." src="img/aaa.jpg">
            <div class="caption">
              <p class="item-content">研究者经常责怪媒体夸大报道他们的研究成果，但最近发表在《英国医学杂志》上的研究表明，他们所在高校的新闻中心才是夸张报道的源头。</p>
            </div>
          </div>          
        </div>
        <!-- 響應式佈局所需要的佔位符，只在sm和xs時起作用 -->
        <div class="clearfix visible-md visible-sm visible-xs"></div>
        <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
          <div class="thumbnail item">
            <span class="label label-success">前沿</span>&nbsp;<span class="label label-default">生物</span>
            <h3><a class="item-title" href="" target="_blank">【论文故事】抢下那块铁：细菌与人类的演化斗争</a></h3>
            <div class="item-info">
              <span style="padding-right:6px">S.西尔维希耶</span> 
              <span style="padding-left:6px">昨天14:23</span>
              <a class="item-info item-comment">
                <span class="glyphicon glyphicon-comment"></span>&nbsp;17
              </a>
            </div>
            <img data-src="holder.js/300x240" alt="..." src="img/aaa.jpg">
            <div class="caption">
              <p class="item-content">为了一种金属元素，灵长类和细菌开战了：感染宿主的病原菌需要铁来存活，宿主的营养免疫机制则想通过把铁藏起来“饿死”病菌。双方你来我往，双方不断变强。这场仗，已打了4000万年。</p>
            </div>
          </div>          
        
          <div class="thumbnail item">
            <span class="label label-success">评论</span>&nbsp;<span class="label label-default">食物</span>
            <h3><a class="item-title" href="" target="_blank">“终于有一场不大吵大闹的转基因辩论了”</a></h3>
            <div class="item-info">
              <span style="padding-right:6px">环球科技观光团</span> 
              <span style="padding-left:6px">2014-12-11 18:23</span>
              <a class="item-info item-comment">
                <span class="glyphicon glyphicon-comment"></span>&nbsp;120
              </a>
            </div>
            <img data-src="holder.js/300x240" alt="..." src="img/aaa.jpg">
            <div class="caption">
              <p class="item-content">2014年12月3日，美国纽约举办了一场关于转基因问题的辩论。在众多关于转基因的吵闹中，这是一场难得的有价值的辩论——因为双方都接受过基本科学训练，没有纠缠那些早已确立的事实，而是真正地在讨论我们应当如何评论一种技术的作用。</p>
            </div>
          </div>          
        </div>
      </div>
    </div> <!-- /container -->

  </body>
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="./resources/jquery.min.js"></script>
  <!-- holder.js 用于直接在客户端渲染图片的占位 -->
  <script src="./resources/holder/holder.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="./bootstrap/js/bootstrap.min.js"></script>
</HTML>